<template>
    <view>
        <view class="header">
            <image class="headerBack" src="../../static/images/jpg02.jpg"></image>
            <u-navbar
                    :title="$lang('工单管理')"
                    :bgColor="'rgba(255,255,255,0)'"
                    :fixed="false"
                    autoBack
            >
            </u-navbar>
            <view class="searchFilter">
                <view class="fl">
                    <view class="icon">
                        <image src="../../static/images/icon11.png"></image>
                    </view>
                    <view class="inputBox" @click="workOrderWarehouseListFun">
                        <input type="text" :placeholder="$lang('请选择配送仓库')" v-model="formInline.warehouse_name">
                        <view class="inputBoxHide"></view>
                    </view>
                </view>
                <view class="fr" @click="showDrawer">
                    {{$lang('筛选')}}
                    <image src="../../static/images/icon12.png"></image>
                </view>
            </view>
        </view>
        <scroll-view scroll-y class="scrollView" :style="{height:scrollViewHeight}">
            <view class="table">
                <uni-table border :emptyText="$lang('暂无数据')">
                    <uni-tr class="tableHead">
                        <uni-th align="center" v-for="(item,index) in tableColumn" :key="index">{{$lang(item.label)}}</uni-th>
                        <uni-th align="center">{{$lang('操作')}}</uni-th>
                    </uni-tr>
                    <uni-tr v-for="(item,index) in tableData" :key="index">
                        <uni-td align="center" v-for="(data,dataIndex) in tableColumn" :key="dataIndex">
                            <text v-if="data.value == 'index'">{{index + 1}}</text>
                            <view v-else-if="data.value == 'shop'">
                                {{item.shop.shop_name}}
                            </view>
                            <view v-else-if="data.value == 'staff'">
                                {{item.staff.name}}
                            </view>
                            <view v-else-if="data.value == 'goods_order_item'">
                                <view v-for="(goods,goodsIndex) in item.goods_order_item" :key="goodsIndex">
                                    <u-tag :text="`${goods.goods_code}-${goods.warehouse.name}-${goods.num}-${goods.goods_money}`" :bgColor="colorList[goodsIndex]" :borderColor="colorList[goodsIndex]" size="mini"></u-tag>
                                </view>
                            </view>
                            <view v-else-if="data.value == 'goods_order'">
                                {{item.goods_order.goods_money}}
                            </view>
                            <view v-else-if="data.value == 'status'">
                                <span v-if="item.status == 1 && item.type == 1">{{$lang('审核中')}}</span>
                                <span v-if="item.status == 1 && item.type == 2">{{$lang('待量尺')}}</span>
                                <span v-if="item.status == 2">{{$lang('待配送')}}</span>
                                <span v-if="item.status == 3">{{$lang('顾客未签字审批中')}}</span>
                                <span v-if="item.status == 4">{{$lang('已完成')}}</span>
                                <span v-if="item.status == 5">{{$lang('已取消')}}</span>
                            </view>
                            <view v-else-if="data.value == 'Workordertime'">
                                <view>{{$lang('期望时间')}}:{{$common.formatDate(item.expectation_time * 1000)}}</view>
                                <view>{{$lang('计划时间')}}:{{$common.formatDate(item.plan_time * 1000)}}</view>
                            </view>
                            <view v-else-if="data.value == 'work_order_staff'">
                                <view v-for="(work,workIndex) in item.work_order_staff" :key="workIndex">
                                    <text v-if="work.type == 1">{{$lang('司机')}}：{{work.staff.name}}</text>
                                    <text v-if="work.type == 2">{{$lang('安装工')}}：{{work.staff.name}}</text>
                                    <text v-if="work.type == 3">{{$lang('量尺')}}：{{work.staff.name}}</text>
                                </view>
                            </view>
                            <text v-else>{{item[data.value]}}</text>
                        </uni-td>
                        <uni-td align="center">
                            <view class="uni-group" v-if="item.type == 1">
                                <button class="text-btn" size="mini" type="primary" v-if="item.status == 1" @click="finishPick(item)">{{$lang('完成取货')}}</button>
                                <button class="text-btn" size="mini" type="primary" v-if="item.status == 2" @click="cancelDeliveryFun(item)">{{$lang('取消配送')}}</button>
                                <button class="text-btn" size="mini" type="primary" v-if="item.status == 1 || item.status == 2" @click="$common.go(1,`/pages/workOrder/abnorDelivery?id=${item.id}`)">{{$lang('异常配送')}}</button>
                                <button class="text-btn" size="mini" type="primary" v-if="item.status == 2" @click="$common.go(1,`/pages/workOrder/deliveryForm?id=${item.id}`)">{{$lang('配送安装单')}}</button>
                            </view>
                            <view class="uni-group" v-else>
                                <button class="text-btn" size="mini" type="primary" v-if="item.status == 1" @click="$common.go(1,`/pages/workOrder/meaScaleCancel?id=${item.id}`)">{{$lang('取消量尺')}}</button>
                                <button class="text-btn" size="mini" type="primary" v-if="item.status == 1" @click="$common.go(1,`/pages/workOrder/meaScale?id=${item.id}`)">{{$lang('量尺')}}</button>
                            </view>
                        </uni-td>
                    </uni-tr>
                </uni-table>
                <view class="pagination">
                    <uni-pagination :show-icon="true" :total="total" title="" @change="currentChange" />
                </view>
            </view>
        </scroll-view>
        <uni-drawer ref="showRight" mode="right">
            <view :style="{height:statusBarHeight + 'px'}"></view>
            <view class="filterTitle">{{$lang('筛选')}}</view>
            <scroll-view style="height: calc(100% - 375rpx);width: 600rpx" scroll-y="true">
                <view class="filterList">
                    <view class="li">
                        <view class="fl">{{$lang('状态')}}</view>
                        <view class="fr">
                            <uni-data-select
                                    v-model="formInline.status"
                                    :localdata="statusList"
                                    :arrayConfig="{labelKey:'label',valueKey:'value'}"
                            ></uni-data-select>
                        </view>
                    </view>
                    <view class="li">
                        <view class="fl">{{$lang('开始时间')}}</view>
                        <view class="fr">
                            <uni-datetime-picker type="date" :clear-icon="false" v-model="formInline.start_time" :placeholder="$lang('年/月/日')"  />
                        </view>
                    </view>
                    <view class="li">
                        <view class="fl">{{$lang('结束时间')}}</view>
                        <view class="fr">
                            <uni-datetime-picker type="date" :clear-icon="false" v-model="formInline.end_time" :placeholder="$lang('年/月/日')"  />
                        </view>
                    </view>
                </view>
            </scroll-view>
            <view class="drawerBtn">
                <view class="fl" @click="filterRest">{{$lang('重置筛选')}}</view>
                <view class="fr" @click="filterSubmit">{{$lang('确定')}}</view>
            </view>
        </uni-drawer>
        <u-picker
                :show="pickerShow"
                :columns="pickerColumns"
                @close="pickerShow = false"
                @cancel="pickerShow = false"
                @confirm="pickerConfirm"
                :keyName="keyName"
                closeOnClickOverlay
        ></u-picker>
    </view>
</template>

<script>
    import {
        workOrderList,
        workOrderWarehouseList,
        workOrderPick,
        cancelDelivery
    } from '../../api/api'
    export default {
        data() {
            return {
                formInline:{
                    page:1,
                    status:'',
                    start_time:'',
                    end_time:'',
                    warehouse_id:'',
                    warehouse_name:'',
                },
                pickerShow:false,
                pickerColumns:[],
                keyName:'',
                scrollViewHeight:0,
                statusBarHeight:0,
                colorList:[
                    "#409eff",
                    "#67c23a",
                    "#f56c6c",
                    "#e6a23c",
                    "#FFA500", // 橙色
                    "#87CEEB", // 天蓝
                    "#98FF98", // 薄荷绿
                    "#FFD700", // 金黄
                    "#8A2BE2", // 紫罗兰
                    "#FF7F50", // 珊瑚红
                    "#50C878", // 翡翠绿
                    "#FF69B4", // 玫粉
                    "#1E90FF", // 宝蓝
                    "#FFDB58", // 芥末黄
                    "#800080", // 深紫
                    "#7CFC00", // 草绿
                    "#FF7518", // 南瓜橙
                    "#007BA7", // 湖蓝
                    "#DDA0DD", // 梅子紫
                    "#FFF44F", // 柠檬黄
                    "#228B22", // 墨绿
                    "#FFB7C5", // 樱花粉
                    "#0047AB", // 钴蓝
                    "#FBCEB1", // 杏黄
                    "#6A0DAD", // 葡萄紫
                    "#808000", // 橄榄绿
                    "#FFC0CB", // 粉红
                    "#00008B", // 深蓝
                    "#FFBF00", // 琥珀色
                    "#E6E6FA", // 薰衣草紫
                    "#8B0000", // 深红（非大红色）
                    "#FFDAB9", // 桃粉
                    "#2F4F4F", // 暗青灰
                    "#DE3163", // 樱桃红
                    "#708090", // 石板灰
                    "#FF007F", // 玫瑰红
                    "#B8860B", // 暗金黄
                    "#778899", // 浅石板灰
                    "#CC7722", // 赭石橙
                    "#F7E7CE", // 香槟黄
                    "#A52A2A", // 棕色
                    "#CD853F", // 秘鲁棕
                    "#8B4513", // 马鞍棕
                    "#D2691E", // 巧克力色
                    "#FFFFFF", // 纯白
                    "#C0C0C0", // 银色
                    "#696969", // 暗灰
                    "#F5F5DC", // 米色
                    "#000000", // 纯黑
                    "#FAEBD7", // 古董白
                    "#FFFDD0", // 奶油黄
                    "#E6E6FA"  // 淡紫
                ],
                statusList:[
                    {label:this.$lang('待取货/待量尺'),value:1},
                    {label:this.$lang('待配送'),value:2},
                    {label:this.$lang('顾客未签字审批中'),value:3},
                    {label:this.$lang('已完成'),value:4},
                    {label:this.$lang('已取消'),value:5},
                ],
                tableData:[],
                tableColumn:[
                    {label:this.$lang('序号'),value:'index'},
                    {label:this.$lang('店铺名称'),value:'shop'},
                    {label:this.$lang('收银人'),value:'staff'},
                    {label:this.$lang('客户名称'),value:'customer'},
                    {label:this.$lang('购买商品'),value:'goods_order_item'},
                    {label:this.$lang('商品总金额'),value:'goods_order'},
                    {label:this.$lang('状态'),value:'status'},
                    {label:this.$lang('工单时间'),value:'Workordertime'},
                    {label:this.$lang('操作人'),value:'work_order_staff'},
                ]
            }
        },
        onLoad() {
            let systemInfo = uni.getSystemInfoSync();
            this.scrollViewHeight = systemInfo.screenHeight - systemInfo.statusBarHeight - this.$common.rpxToPx(177) + 'px'
            this.statusBarHeight = systemInfo.statusBarHeight;
        },
        onShow(){
            this.getList();
        },
        methods: {
            cancelDeliveryFun(item){
                uni.showModal({
                    title: this.$lang('提示'),
                    content: this.$lang('您确定要取消配送吗？'),
                    success: (data) => {
                        if (data.confirm) {
                            cancelDelivery({
                                id:item.id
                            }).then(res => {
                                if(res.code == 1){
                                    uni.showToast({
                                        title:'取消配送成功',
                                        icon:'none'
                                    });
                                    this.formInline.page = 1;
                                    this.getList();
                                } else{
                                    uni.showToast({
                                        title:res.msg,
                                        icon:'none'
                                    })
                                }
                            })
                        } else if (data.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });

            },
            finishPick(item){
                uni.showModal({
                    title: this.$lang('取货提醒'),
                    content: this.$lang('您确定已经取出订单货品了吗？'),
                    success: (data) => {
                        if (data.confirm) {
                            workOrderPick({
                                id:item.id
                            }).then(res => {
                                if(res.code == 1){
                                    uni.showToast({
                                        title:'取货成功',
                                        icon:'none'
                                    });
                                    this.formInline.page = 1;
                                    this.getList();
                                } else{
                                    uni.showToast({
                                        title:res.msg,
                                        icon:'none'
                                    })
                                }
                            })
                        } else if (data.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
            filterSubmit(){
                this.formInline.page = 1;
                this.getList();
                this.$refs.showRight.close();
            },
            filterRest(){
                this.formInline = {
                    page:1,
                    status:'',
                    start_time:'',
                    end_time:'',
                    warehouse_id:'',
                    warehouse_name:'',
                }
            },
            showDrawer() {
                this.$refs.showRight.open();
            },
            pickerConfirm(e){
                this.pickerShow = false;
                this.formInline.warehouse_name = e.value[0].name;
                this.formInline.warehouse_id = e.value[0].id;
                this.formInline.page = 1;
                this.getList();
            },
            currentChange(e){
                this.formInline.page = e.current;
                this.getList();
            },
            getList(){
                workOrderList(this.formInline).then(res => {
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                })
            },
            workOrderWarehouseListFun(){
                workOrderWarehouseList().then(res => {
                    this.pickerColumns = [];
                    this.pickerColumns.push(res.data);
                    this.pickerShow = true;
                    this.keyName = 'name';
                })
            },
        }
    }
</script>
<style>
    page{
        background: #f5f5f5;
    }
</style>
<style lang="scss" scoped>
    .header{
        position: relative;
        .headerBack{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .nav{
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20rpx 25rpx 0 25rpx;
            .li{
                /*flex: 1;*/
                text-align: center;
                position: relative;
                height: 75rpx;
                font-size: 30rpx;
                color: #555;
                display: flex;
                flex-direction: column;
                /*justify-content: center;*/
                align-items: center;
                image{
                    width: 38rpx;
                    height: 12rpx;
                    /*position: absolute;
                    left: 50%;
                    bottom: 0;
                    transform: translateX(-50%);*/
                    display: none;
                    margin-top: 8rpx;
                }
                &.active{
                    font-size: 32rpx;
                    color: #333;
                    image{
                        display: block;
                    }
                }
            }
        }
        .searchFilter{
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            z-index: 2;
            padding: 0 24rpx 24rpx 24rpx;
            .fl{
                width: 580rpx;
                height: 70rpx;
                border-radius: 70rpx;
                border: 1px solid #c3ddf7;
                background: #fff;
                display: flex;
                align-items: center;
                .icon{
                    width: 36rpx;
                    height: 31rpx;
                    padding: 0 30rpx 0 37rpx;
                    position: relative;
                    image{
                        width: 100%;
                        height: 100%;
                    }
                    &:after{
                        content: '';
                        display: block;
                        width: 1px;
                        height: 29rpx;
                        background: #d2d2d2;
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
                .inputBox{
                    flex: 1;
                    position: relative;
                    input{
                        width: 100%;
                        padding: 0 25rpx;
                        font-size: 24rpx;
                    }
                    .inputBoxHide{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: 9;
                    }
                }
            }
            .fr{
                padding: 0 26rpx 0 15rpx;
                height: 52rpx;
                border-radius: 5rpx;
                line-height: 52rpx;
                font-size: 26rpx;
                color: #365aa6;
                position: relative;
                background: #fff;
                image{
                    width: 20rpx;
                    height: 21rpx;
                    position: absolute;
                    right: 6rpx;
                    bottom: 6rpx;
                }
            }
        }
    }
    .scrollView{
        position: fixed;
        bottom: 0;
        left: 0;
        width:100%;
        z-index: 9;
        .table{
            padding: 27rpx 24rpx;
        }
    }
    .filterTitle{
        height: 80rpx;
        border-bottom: 1px solid #eee;
        text-align: center;
        font-size: 32rpx;
        color: #222;
    }
    .filterList{
        padding: 0 25rpx;
        .li{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 30rpx;
            .fl{
                width: 200rpx;
            }
            .fr{
                position: relative;
                flex: 1;
                /deep/ .uni-stat__select{
                    .uni-select{
                        font-size: 32rpx;
                        border-color: #757575;
                        border-radius: 8rpx;
                        padding: 0 25rpx;
                        height: 90rpx;
                        .uni-select__input-box{
                            height: 100%;
                            .uni-select__input-text{
                                font-size: 32rpx;
                            }
                            .uni-icons{
                                font-size: 32rpx;
                                color: #757575;
                            }
                        }
                    }
                }
                input{
                    font-size: 32rpx;
                    border: 1px solid #757575;
                    border-radius: 8rpx;
                    padding: 0 25rpx;
                    height: 90rpx;
                }
                /deep/ .uni-date{
                    .uni-date-picker__container{
                        position: absolute;
                        left: -50%;
                        .uni-popper__arrow{
                            left: 50%;
                        }
                    }
                    .uni-date-x--border{
                        border-color: #757575;
                        border-radius: 8rpx;
                        .uni-date-x{
                            border-radius: 8rpx;
                            font-size: 32rpx;
                            .uni-icons{
                                font-size: 40rpx !important;
                                color: #365aa6 !important;
                            }
                            .uni-date__x-input{
                                height: 90rpx;
                                line-height: 90rpx;
                                font-size: 32rpx;
                                margin-left: 12rpx;
                            }
                        }
                    }
                }
            }
        }
    }
    .drawerBtn{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 25rpx;
        .fl{
            width: 260rpx;
            height: 90rpx;
            line-height: 90rpx;
            background: #fff;
            border: 1px solid #bababa;
            text-align: center;
            border-radius: 90rpx;
            font-size: 36rpx;
            color: #363636;
        }
        .fr{
            width: 260rpx;
            height: 90rpx;
            line-height: 90rpx;
            background: #365aa6;
            border: 1px solid #365aa6;
            text-align: center;
            border-radius: 90rpx;
            font-size: 36rpx;
            color: #fff;
        }
    }
</style>
